import React, { memo, useState, useMemo } from "react";
import { Tabs } from "antd-mobile";
import style from "./sty.module.css";

import SongList from "@/components/SongList";
import Desc from "../desc";

import { shallowEqual, useSelector } from "react-redux";
import { reqArtistAlbum, reqArtistMv } from "../../../../api/artist";
import { getCurSong } from "@/store/actionCreator";
import Albums from "../albums";
import Mvs from "../mvs";
import { singerTabs } from "../../../../constans";
import { useDispatch } from "react-redux";
const Content = (props) => {
  const dispatch = useDispatch();
  const { id, info, songs } = props;
  const [albums, setAlbums] = useState([]);
  const [mvs, setMvs] = useState([]);
  const { currentSong, playlist } = useSelector(
    (state) => ({
      currentSong: state.getIn(["curSong"]),
      playlist: state.getIn(["playList"]),
    }),
    shallowEqual
  );
  const getAlbums = async (id) => {
    if (albums.length) {
      return;
    }
    const res = await reqArtistAlbum(id);
    setAlbums(res.hotAlbums || []);
  };
  const getMvs = async (id) => {
    if (mvs.length) {
      return;
    }
    const res = await reqArtistMv(id);
    setMvs(res.mvs || []);
  };

  const handleChange = (tab, index) => {
    switch (index) {
      case 0: {
        break;
      }
      case 1: {
        getAlbums(id);
        break;
      }
      case 2: {
        getMvs(id);
        break;
      }
      case 3: {
        break;
      }
      default:
        break;
    }
  };
  const onSelectSong = (id) => {
    dispatch(getCurSong(id));
  };

  const h = playlist.length ? 60 : 0;
  const height = { height: `calc(100vh - ${293 + h}px` };
  const songList = useMemo(() => songs, [songs]);
  return (
    <div className={style.wrapper}>
      <Tabs
        tabs={singerTabs}
        swipeable={false}
        onChange={handleChange}
        initialPage={0}
      >
        {/*单曲*/}
        <div className={style["tab-item"]} style={height}>
          <SongList
            onSelectSong={onSelectSong}
            list={songList}
            currentSongID={currentSong.id}
          />
        </div>
        {/*专辑*/}
        <div className={style["tab-item"]} style={height}>
          <Albums albums={albums} />
        </div>
        {/*MV*/}
        <div className={style["tab-item"]} style={height}>
          <Mvs mvs={mvs} />
        </div>
        {/*简介*/}
        <div className={style["tab-item"]} style={height}>
          <Desc info={info} />
        </div>
      </Tabs>
    </div>
  );
};

export default memo(Content);
